<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" id="addimg" onchange="onChange()">

    <!-- <img src="" alt="" id="myimg"> -->

    <canvas id="mycanvas" width="250" height="300" style="border:1px solid #eb1111;"></canvas><br/><br/><br/><br/>

    <div style="width:400px;height:500px;right: 10px;background: rgb(251, 251, 251);border: 1px solid #fd03d4;"></div>

    <!-- <input type=" file " onchange="previewFile() ">
    <img src=" " height="200 " alt="Image preview... "> -->

</body>
<script>
    // function previewFile() {
    //     const preview = document.querySelector('img');
    //     const file = document.querySelector('input[type=file]').files[0];
    //     const reader = new FileReader();

    //     if (file) {
    //         reader.readAsDataURL(file);
    //     }

    //     reader.addEventListener("load ", function() {
    //         // convert image file to base64 string
    //         preview.src = reader.result;
    //     }, false);

    //     // if (file) {
    //     //     reader.readAsDataURL(file);
    //     // }
    // }

    function onChange() {

        var img = new Image();
        // var imgWidth = img.width;
        // var imgHeight = img.height;

        //var files = document.getElementById("addimg").files;
        var file = document.querySelector("#addimg").files[0];
        var reader = new FileReader();

        if (file) {
            reader.readAsDataURL(file);
        }

        reader.addEventListener("load ", function() {
            // convert image file to base64 string
            img.src = reader.result;
        }, false);



        var body = document.querySelector('div');
        body.appendChild(img);

        // var c = document.getElementById("mycanvas");
        // var cxt = c.getContext("2d");

        // img.onload = function() {
        //         cxt.drawImage(img, 10, 10);

        //     }
        // canvas.width = imgWidth;
        // canvas.height = imgHeight;

    }
</script>


</html>